<template>
	<view>
		<!-- 其中有四个容器存放信息 
		    1 轮播图
		    2 model0 天气+四组件
		    3 model1 两组件
		    4 model2 左右横向拖拉图
		-->
		<!-- 轮播图区域 -->
		<!-- http://st24cnfz3.hn-bkt.clouddn.com/background1.jpg -->
		<view class="swiper">
			<swiper class="swiper_img" indicator-dots="true" indicator-active-color="white" autoplay="true"
				circular="true">
				<swiper-item>
					<image src="http://st24cnfz3.hn-bkt.clouddn.com/background111.jpg" mode="widthFix"
						show-menu-by-longpress="true"></image>
				</swiper-item>
				<swiper-item>
					<image src="http://st24cnfz3.hn-bkt.clouddn.com/background222.jpg" mode="widthFix"
						show-menu-by-longpress="true"></image>
				</swiper-item>
				<swiper-item>
					<image src="http://st24cnfz3.hn-bkt.clouddn.com/background333.jpg" mode="widthFix"
						show-menu-by-longpress="true"></image>
				</swiper-item>
				<swiper-item>
					<image src="http://st24cnfz3.hn-bkt.clouddn.com/background444.jpg" mode="widthFix"
						show-menu-by-longpress="true"></image>
				</swiper-item>
			</swiper>
		</view>


		<view class="main">
			<view>
				<!-- 天气与四个组件区域 -->
				<view>
					<!-- 天气 -->
					<view class="weather-grid">
						<view class="weather-grid-item">
							<view class="weather-grid-inner">
								<view class="weather-grid-title"> 天气 5月1日 19℃~27℃</view>
							</view>
						</view>
					</view>
					<!-- 四个组件区域 -->
					<view class="model0-grid">
						<view class="model0-grid-item">
							<view class="model0-grid-inner" bindtap="model1_click1">
								<view class="model0-grid-icon model0-avatar radius">
									<image mode="aspectFit" class="model0-avatar-img radius"
										src="/static/icon/1jingdianjieshao.png"></image>
								</view>
								<view class="model0-grid-title"> 景点介绍 </view>
							</view>
						</view>
						<view class="model0-grid-item">
							<view class="model0-grid-inner" bindtap="model2_click2">
								<view class="model0-grid-icon model0-avatar radius">
									<image mode="aspectFit" class="model0-avatar-img radius"
										src="/static/icon/2jingdiangushi.png"></image>
								</view>
								<view class="model0-grid-title"> 景点故事 </view>
							</view>
						</view>
						<view class="model0-grid-item">
							<view class="model0-grid-inner" bindtap="model3_click3">
								<view class="model0-grid-icon model0-avatar radius">
									<image mode="aspectFit" class="model0-avatar-img radius"
										src="/static/icon/3jingdiantiyan.png"></image>
								</view>
								<view class="model0-grid-title"> 景点体验 </view>
							</view>
						</view>
						<view class="model0-grid-item">
							<view class="model0-grid-inner" bindtap="model4_click4">
								<view class="model0-grid-icon model0-avatar radius">
									<image mode="aspectFit" class="model0-avatar-img radius"
										src="/static/icon/4jingdianwenchuang.png"></image>
								</view>
								<view class="model0-grid-title"> 景点文创 </view>
							</view>
						</view>
					</view>
				</view>

				<!-- model1 两组件 -->
				<view class="model1-grid-container">
					<view class="model1-grid">
						<view class="model1-grid-item-left">
							<image mode="aspectFit" class="model1-grid-item-img"
								src="http://st24cnfz3.hn-bkt.clouddn.com/model1_1.png"></image>
						</view>
						<view class="model1-grid-item-right">
							<image mode="aspectFit" class="model1-grid-item-img"
								src="http://st24cnfz3.hn-bkt.clouddn.com/model1_2.png"></image>
						</view>
					</view>
				</view>

				<!-- model2 左右横向拖拉图 -->
				<view class="model2-grid">
					<view class="model2-text">游览推荐</view>
					<scroll-view class="model2-scv" scroll-x>
						<view class="model2-item-view">
							<navigator url="/pages/goods-nav-A/goods-nav-A" open-type="navigate">
								<image src="http://st24cnfz3.hn-bkt.clouddn.com/model2_1.jpg"></image>
							</navigator>
						</view>
						<view class="model2-item-view">
							<navigator url="/pages/goods-nav-B/goods-nav-B" open-type="navigate">
								<image src="http://st24cnfz3.hn-bkt.clouddn.com/model2_2.jpg"></image>
							</navigator>
						</view>
						<view class="model2-item-view">
							<navigator url="/pages/goods-nav-B/goods-nav-B" open-type="navigate">
								<image src="http://st24cnfz3.hn-bkt.clouddn.com/background1.jpg"></image>
							</navigator>
						</view>
						<view class="model2-item-view">
							<navigator url="/pages/goods-nav-B/goods-nav-B" open-type="navigate">
								<image src="http://st24cnfz3.hn-bkt.clouddn.com/background1.jpg"></image>
							</navigator>
						</view>
					</scroll-view>

				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style>
	/* 轮播图 */
	.swiper {
		position: relative;
		border-radius: 16rpx;
		width: 100%;
		height: 640rpx;
	}

	.swiper_img {
		position: relative;
		width: 100%;
		height: 100%;
	}

	image {
		width: 100%;
	}

	.info1 {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 16px;
	}

	/* 主板块 */
	.main {
		width: 100%;
		border-top-left-radius: 100rpx;
		border-top-right-radius: 100rpx;
		height: 1055rpx;
		/* 调整 view 高度 */
		position: absolute;
		bottom: 0;
		left: 0;
		background-image:
			url(http://st24cnfz3.hn-bkt.clouddn.com/mainbackground.png);
	}

	/* model0 天气+四组件 */
	/* 天气 */
	.weather-grid {
		width: 100%;
		/* 确保父容器占据整个宽度 */
		margin: 20px 0 0 0;
	}

	.weather-grid-item {
		width: 50%;
		/* 每个组件占据25%的宽度 */
		box-sizing: border-box;
	}

	.weather-grid-inner {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		text-align: center;
		position: relative;
		background-position: center;
		background-repeat: no-repeat;
	}

	.weather-grid-title {
		/* todo 更改字体 */
		font-size: 13px
	}

	/* 四组件 */
	.model0-grid {
	    display: flex;
	    justify-content: space-between;
	    /* 横向排列并保持间距 */
	    flex-wrap: wrap;
	    flex: 1;
	    width: 100%;
	    /* 确保父容器占据整个宽度 */
	    margin: 0 0 0 0;
	}
	
	.model0-grid-item {
	    width: 24%;
	    /* 每个组件占据25%的宽度 */
	    box-sizing: border-box;
	}
	
	.model0-grid-inner {
	    display: flex;
	    align-items: center;
	    justify-content: space-around;
	    flex-direction: column;
	    text-align: center;
	    padding: 20rpx;
	    position: relative;
	    background-position: center;
	    background-repeat: no-repeat;
	}
	
	.model0-grid-icon {
	    width: 70px;
	    height: 70px;
	}
	
	.model0-avatar-img {
	    width: 100%;
	    height: 100%;
	}
	
	.model0-grid-title {
	    /* todo 更改字体 */
	    font-size: 13px
	}


	.model1-grid-container {
		width: 100%;
	}

	.model1-grid {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.model1-grid-item-left {
		width: 45%;
		border-radius: 60rpx;
		overflow: hidden;
		height: 250rpx;
		margin: 0 0 0 40rpx;
	}


	.model1-grid-item-right {
		width: 42%;
		border-radius: 60rpx;
		overflow: hidden;
		height: 250rpx;
		margin: 0 40rpx 0 0;
	}

	.model1-grid-item-img {
		height: 250rpx;
		object-fit: cover;
	}

	.model2-text {
		font-size: 20px;
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
		margin: 20rpx 0 30rpx 25rpx;
	}

	.model2-grid {
		margin: 5rpx 0 0 40rpx;
	}

	.model2-scv {
		width: 100%;
		height: 180px;
		white-space: nowrap;
		overflow-x: auto;
		/* 确保横向滚动 */
	}

	.model2-scv view {
		width: 170px;
		height: 180px;
		text-align: center;
		display: inline-block;
	}

	.model2-item-view {
		border-radius: 70rpx;
		overflow: hidden;
		/* 确保内容不会溢出容器 */
		background-color: black;
		/* 添加背景色以便看到圆角效果 */
		margin: 0px 20px 0 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.model2-item-view image {
		width: 120%;
		height: 180px;
		display: flex;
	}
</style>